<template>
  <div class="arrymdiv">
    <div class="mb-2 radio flex items-center text-sm">
      <el-radio-group v-model="radio" class="ml-4">
        <el-radio label="1" size="large">公开专题</el-radio>
        <el-radio label="2" size="large">专属专题</el-radio>
      </el-radio-group>
    </div>
    <el-button class="czbutton" type="primary" @click="$router.push({ name: 'addspecial' })">新增专题</el-button>
    <div class="divinput"><el-input v-model="input" placeholder="搜索" /></div>
    <el-button class="dbutton" type="primary" @click="aa()">搜索</el-button>
    <div class="bg">
      <el-row gutter="0">
        <el-col :span="6" v-for="i in shuju"
          ><div @click="details(1)" class="grid-content ep-bg-purple sjdiv">
            <el-image class="sjimage" :src="i.img"> </el-image>
            <div class="biaoqian">
              <el-tag effect="dark" v-if="i.tag != null" :type="i.tagtype">
                {{ i.tag }}
              </el-tag>
            </div>
            <div class="bgcz">
              <p>{{ i.name }}</p>
            </div>
          </div></el-col
        >
      </el-row>
    </div>
    <el-pagination class="paging" background layout="prev, pager, next" :total="1000" />
  </div>
</template>
<script>
import { reactive, toRefs } from '@vue/reactivity';
import { useRouter } from 'vue-router';
export default {
  setup() {
    const $router = useRouter();
    const data = reactive({
      input: null,
      radio: 0,
      shuju: [
        { name: 'vue专题', img: '../../../src/assets/img/koalalogo.jpg', tag: '热', tagtype: 'danger' },
        { name: 'html专题', img: '../../../src/assets/img/koalalogo.jpg' },
        { name: 'js专题', img: '../../../src/assets/img/koalalogo.jpg' },
        { name: '测试', img: '../../../src/assets/img/koalalogo.jpg' },
        { name: '测试', img: '../../../src/assets/img/koalalogo.jpg' },
      ],
    });
    const event = {};
    const aa = () => {
      console.log(data.input);
    };
    const details = (res) => {
      $router.push({ name: 'detailsspecial', params: { id: res } });
    };
    return {
      ...toRefs(data),
      aa,
      details,
    };
  },
};
</script>
<style scoped>
.divinput {
  margin-top: 10px;
  display: inline-block;
  width: 250px;
  margin-left: 290px;
}
.dbutton {
  margin-left: 5px;
}
.czbutton {
  float: left;
  margin: 10px;
  margin-right: 50px;
}
.bg {
  margin: 10px;
  background-color: rgb(249, 249, 249);
  width: 98%;
  height: 83%;
  overflow-x: hidden;
  border-radius: 5px;
}
.paging {
  margin-left: 400px;
}
.sjdiv {
  border-bottom: solid 1px rgba(229, 229, 229, 0.68);
  border-left: solid 1px rgba(229, 229, 229, 0.68);
  border-right: solid 1px rgba(229, 229, 229, 0.68);
  margin: 30px;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
  position: relative;
}
.sjdiv:hover {
  box-shadow: 0 16px 35px 0 rgba(118, 118, 118, 0.15);
  transform: translate(0, -1px);
  transition-delay: 0s !important;
}
.sjimage {
  width: 100%;
  height: 140px;
  border-radius: 5px 5px 0% 0%;
}
.bgcz {
  text-align: center;
  padding: 20px;
}
.biaoqian {
  position: absolute;
  top: 0;
  right: 0;
  margin: 5px;
}
.radio {
  float: right;
  margin-right: 15px;
}
.arrymdiv {
  height: 650px;
  border-radius: 10px;
  margin: 1px;
  background-color: rgb(255, 255, 255);
  box-shadow: 1px 1px 5px #cfcfcf;
}
</style>
